<link rel="stylesheet" type="text/css" media="screen" href="protected/style/slideshow.css"/>
<script type="text/javascript" src="protected/js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 5000
        });
    });
</script>

<div id="header_cont">
    <div id="logo_cont" class="ui-corner-top">
        <h1>CrossLine</h1>
        <h3>... art at your fingertips ...</h3>
    </div>
    <div id="slideshow_cont" class="ui-corner-all">
        <div id="slider">
        <ul id="sliderContent">
            <?php
                    $con = mysql_connect("localhost","root","");
                    if (!$con){
                        die('Could not connect: ' . mysql_error());
                    }
                    mysql_select_db("crossline", $con);

                    $result = mysql_query("SELECT * FROM product, category
                                    WHERE product.category_idcategory = category.idcategory
                                    ORDER BY timestamp desc limit 5;");
                    while($row = mysql_fetch_array($result)){
                        echo "<li class='sliderImage'>";
                        echo "<img src= '". $row['image'] . "' width='690' height='270' alt='Slide 1'>";
                        echo "<span class='top'>";
                        echo "<strong>" . $row['name'] . 
                        "<br /> Amount: Php " . $row['price'] .  "</strong>";
                        echo "<br />" . $row['description'] . "</span>";
                    } 
                    mysql_close($con);
                ?>
            <div class="clear sliderImage"></div>
        </ul>
        </div>
    </div>
    <div id="navi_cont" class="ui-corner-bottom">
        <div <?php 
            if ($page == 'home') {
                echo 'class="ui-corner-bottom ui-button activePage"';
            } else {
                echo 'class="ui-corner-bottom ui-button"';
            } 
            ?>id="homeButton">
            <span><a href="index.php" style="text-decoration: none;color:white !important;">Home</a></span>
        </div>
        <div <?php 
            if ($page == 'product') {
                echo 'class="ui-corner-bottom ui-button activePage"';
            } else {
                echo 'class="ui-corner-bottom ui-button"';
            } 
            ?> id="productsButton">
            <span><a href="products.php" style="text-decoration: none;color:white !important;">Products</a></span>
        </div>
        <div <?php 
            if ($page == 'about') {
                echo 'class="ui-corner-bottom ui-button activePage"';
            } else {
                echo 'class="ui-corner-bottom ui-button"';
            } 
            ?> id="aboutButton">
            <span><a href="about.php" style="text-decoration: none;color:white !important;">About</a></span>
        </div>
    </div>
</div>
